﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用户登录</title>
<link href="css/blog_login.css" rel="stylesheet" type="text/css" media="all">
    <script src="/js/axios.min.js"></script>
    <script src="/js/jQuery_3.6.0.min.js"></script>
    <script src="/js/vue.min.js"></script>

</head>

<body>
<div id="logindiv">
<div id="head">
</div>


<div id="body">
<div class="top1">
<ul>
<li>登 陆</li>
</ul>
<hr class="hr1"/>
</div>
<div class="valueDate">
<!--<p>&nbsp;&nbsp;验证码必须填写</p>-->
<p>&nbsp;&nbsp;用户名必须填写</p>
<p>&nbsp;&nbsp;密码必须填写</p>
</div>
<div class="login">
<h1>登陆</h1>
<div class="content">
<p><span>用户名</span> *<br /><input name="" v-model="username" type="text" class="t_input" size="50"/></p>
<p><span>密码</span> *<br /><input name="" type="password" v-model="password" class="t_input" size="50"/></p>
<!--<p><span>验证码</span> *<img src="#" /><br /><input name="" type="text" class="t_input" size="50"/></p>
<p><input name="" type="checkbox" value="" />让系统记住我</p>
-->
<p><input name="" @click="userLogin()" type="button" value="登 陆"/>  <a href="blog_register.html">我要注册</a></p>
<p></p>
</div>
</div>
</div>

<div id="foot">
<hr />
<center>Copyright &copy; 2013-2020</center>
</div>
</div>
<script language="JavaScript">
    var vm=new Vue({
        el:"#logindiv",
        data:{
            username:'',
            password:''
        },
        methods:{
            userLogin:function () {
                //利用ajax 从后台加载数据
                var path="/userInfo?username="+vm.username+"&password="+vm.password;
                axios.get(path,null).then(function (obj) {
                    if (obj.status==200){
                        var pageResult=obj.data;
                        if(pageResult.code==100){
                            alert("用户名或者密码错误");
                            return;
                        }
                        location.href="/blog_menu.html";
                    }
                }).catch(function () {
                    //有问题函数
                    alert("错误")
                });
            }
        }
    });
</script>
</body>
</html>
